<style>
#newTask{
	width:300px;
	float:left;
}
#newTask input[type=button]{
	margin:5px 0px;
}
#details{
	float:left;
}
#history_details{
	min-width:200px;
	max-width:500px;
	height:250px;
	overflow:auto;
	margin:0px 0px 0px 1px;
}
#history_details h3{
	padding-left:18px;
	background-image:url(gui/icons/history.gif);
	background-repeat:no-repeat;
	background-position:0px 0px;
}
#history_details #history_details_content ol{
	max-width:460px;
	height:210px;
	overflow:auto;
	margin:0px 10px;
	padding:0px;
	float:left;
	clear:both;
	background:#fff;
	border:1px solid #848263;
}
#history_details #history_details_content ol li{
	display:block;
	max-width:420px;
	float:left;
	clear:both;
	padding:5px;
	border-bottom:1px dotted #aaa;
	cursor:default;
}
#history_details #history_details_content ol li .history_date{
	float:right;
}
#history_details #history_details_content ol li:last-child{
	border-bottom:none;
}
#history_details #history_details_content ol li:hover{
	background:#2577BA;
	color:#fff;
}
#history_details #history_details_content ol li .history_options{
	margin-left:10px;
}
#history_details #history_details_content ol li .history_options img{
	cursor:pointer;
	margin:0px 2px;
}
#history_details #history_details_content ol li .history_desc{
	margin:5px 0px 0px 15px;
	font-size:11px;
}
#history_details #history_details_content ol li .history_desc i:before{
	content:open-quote;
}
#history_details #history_details_content ol li .history_desc i:after{
	content:close-quote;
}
#history_details #history_details_content ol li .history_desc i{
	font-family:Georgia, "Times New Roman", Times, serif;
}
#komitent_details{
	width:400px;
	clear:both;
	overflow:auto;
	margin:1px 0px 0px 1px;
}
#newTask #submit{
	float:right;
}
#newTask fieldset{
	border:1px solid #aaa;
}
#newTask legend{
	color:#aaa;
}
#newTask textarea{
	width:220px;
	height:100px;
}
#newTask select.yesno{
	max-width:40px;
}
#newTask select.second{
	margin-left:0px;
}
#newTask input[type=submit].save{
	background-image:url(gui/icons/save.gif);
	background-repeat:no-repeat;
	background-position:3px center;
	padding-left:18px;
}
#newTask label{
	width:60px;
	display:block;
	float:left;
	text-align:right;
	padding-top:8px;
}
#newTask fieldset label{
	width:48px;
}
#newTask fieldset textarea{
	width:200px;
	height:50px;
}
#newTask input[type=text]:disabled{
	background:#fff;
	color:#000;
	border:1px solid #7F9DB9;
	cursor:default;
}
#newTask input[type=button].searchBtn{
	width:16px;
	height:16px;
	background:url(gui/icons/search.gif) no-repeat center center;
	border:none;
	cursor:pointer;
}
#newTask input[type=button].komBtn{
	width:16px;
	height:16px;
	background:url(gui/icons/next.gif) no-repeat center center;
	border:none;
	cursor:pointer;
}
#newTask input[type=button]#komContactsBtn,
#newTask textarea#komContactsTxt{
	display:none;
}
#newTask input[type=button]#komContactsBtn{
	width:16px;
	height:16px;
	background:url(gui/icons/user.gif) no-repeat center center;
	border:none;
	cursor:pointer;
}
#newTask ul#info_table{
	max-width:100px;
	margin:0px;
	padding:0px;
	float:right;
	list-style-type:none;
	
}
#newTask ul#info_table li{
	margin:0px;
	min-height:16px;
	padding:0px 20px 2px 0px;
	background-repeat:no-repeat;
	background-position:right 0px;
	display:none;
	text-align:right;
}
#newTask ul#info_table li#num_calls{background-image:url(gui/icons/phone.gif)}
#newTask ul#info_table li#ugovor{background-image:url(gui/icons/ugovor.gif); font-size:10px; cursor:pointer;}

#newTask ul#info_table li#call_history ul#historyLayer{
	max-height:500px;
	overflow:auto;
	position:absolute;
	display:none;
	background:#fff;
	border:1px solid #000;
	padding:0px;
	margin:17px 0px 0px 0px;
	list-style-type:none;
	font-size:12px;
	-moz-opacity:0.3;
}
#newTask ul#info_table li#call_history ul#historyLayer:hover{
	-moz-opacity:1;
}
#newTask ul#info_table li#call_history ul#historyLayer li{
	display:block;
	margin:0px;
	padding:3px;
	border-bottom:1px solid #ccc;
	text-align:left;
}
#newTask ul#info_table li#call_history ul#historyLayer li:last-child{
	border-bottom:none;
}
#newTask #btnMakeListic{
	width:25px;
	height:13px;
	overflow:hidden;
	text-indent:-100em;
	background:url(gui/icons/listic_sastanak.gif) no-repeat 0px 0px;
	border:none;
	padding:0px;
	margin:8px 0px;
	cursor:pointer;
}
#komitent_details{
	float:left;
}
#rokovnik_alarms{
	float:right;
	padding:5px;
	text-align:right;
	overflow:auto;
	max-width:350px;
	display:none;
}
#rokovnik_alarms #alarm_link{
	display:block;
	float:right;
	height:24px;
	text-decoration:none;
	font-weight:bolder;
	background:url(gui/icons/alarm.gif) no-repeat left center;
	border:none;
	cursor:pointer;
	padding-left:24px;
	font-size:14px;
}
#rokovnik_alarms ol{
	float:right;
	clear:both;
	text-align:left;
	margin:0px;
	padding:5px 5px 5px 30px;
	display:none;
	max-height:500px;
	overflow:auto;
}
#rokovnik_alarms ol li{
	margin:0px;
	padding:0px;
	border-bottom:1px dotted #ccc;
	padding:5px;
	cursor:default;
}
#rokovnik_alarms ol li:hover{
	background:#fff;
}
#rokovnik_alarms ol li:last-child{
	border-bottom:none;
}
#rokovnik_alarms ol li.called{
	-moz-opacity:0.2;
	text-decoration:line-through;
}
</style>
<div id="rokovnik_alarms">
	<input type="button" onclick="alarmOnclick(this)" id="alarm_link" value="" />
	<ol class="area"></ol>
	<!--<a href="javascript:void(0)" id="alarm_link" onclick="alarmOnclick(this)">&nbsp;</a>-->
</div>
<div id="time"></div>
<form class="area" method="get" name="newTask" id="newTask" action="javascript:void(0)" onsubmit="addNewTask(this)">
	<ul id="info_table">
		<li id="num_calls" title="Redni broj mog poziva"></li>
		<li id="ugovor" title="Ugovori"></li>
	</ul>
	<h1>Rokovnik</h1>
	<!-- USER -->
	<input type="hidden" name="user" value="{{$user}}" />
	<!-- DATUM -->
	<label for="date">Datum:</label><input style="margin-top:7px; width:100px;" type="text" size="10" name="date" id="date" value="sad" disabled="disabled" />
	<br clear="all" />
	<!-- KOMITENT -->
	<label for="komitent">Komitent:</label>
	<input type="text" disabled="disabled" name="komitent" id="komitent" />
	<input type="hidden" name="komitent_id" id="komitent_id" />
	<input type="button" onclick="searchKomitentRokovnik(this)" title="Nađi komitenta..." value="" class="searchBtn" />
	<input type="button" onclick="showkomitentDetails(this);" title="Detalji komitenta..." value="" class="komBtn" />
	<input type="button" onclick="var yy=document.getElementById('yapyap'); yy.style.display=yy.style.display=='block'?'none':'block'" value="" id="YapYapBtn" title="Srodni komitenti..." />
	<div id="yapyap" class="area">
		<h3>Srodni komitenti</h3>
		<ol></ol>
	</div>
	<input type="button" title="kontakti sa komercijalom" id="komContactsBtn" onclick="ypAjaxForm(document.getElementById('komContactsTxt').value)" />
	<textarea id="komContactsTxt" name="komContactsTxt"></textarea>
	<br clear="all" />
	<!-- POREKLO -->
	<label for="poreklo">Poreklo:</label>
	<select name="poreklo" id="poreklo">
		{{%loop start poreklo_id}}
		<option value="{{$poreklo_id}}">{{$poreklo_name}}</option>
		{{%loop end}}
	</select><br clear="all" />
	<!-- KONTAKT -->
	<label for="kontakt">Kontakt:</label>
	<select name="obavljen" id="obavljen" class="yesno" onchange="filterObavljenKontakt(this)">
		<option value="-1">---</option>
		<option value="1">obavljen</option>
		<option value="0">neobavljen</option>
	</select>
	<select name="kontakt" id="kontakt" class="second">
		{{%loop start kontakt_id}}
		<option value="{{$kontakt_id}}" obavljen="{{$kontakt_obavljen}}">{{$kontakt_name}}</option>
		{{%loop end}}
	</select><br clear="all" />
	<!-- ODGOVOR -->
	<label for="odgovor">Odgovor:</label>
	<select name="ovlascen" class="yesno" onchange="filterOvlascenOdgovor(this)">
		<option value="-1">---</option>
		<option value="1">ovlašćen</option>
		<option value="0">neovlašćen</option>
	</select>
	<select name="odgovor" id="odgovor" style="width:185px;" class="second">
		<option value="0">---</option>
		{{%loop start odgovor_id}}
		<option value="{{$odgovor_id}}" ovlascen="{{$odgovor_ovlascen}}">{{$odgovor_name}}</option>
		{{%loop end}}
	</select>
	<!-- SPEC.DOGADJAJ -->
	<label for="spec_dogadjaj">Specifičan: događaj&nbsp;</label>
	<textarea name="spec_dogadjaj" id="spec_dogadjaj"></textarea><br clear="all" />
	<!-- NAPOMENA -->
	<label for="napomena">Napomena:</label>
	<textarea name="napomena" id="napomena"></textarea><br clear="all" />
	<!-- RESULT -->
	<fieldset>
	  <legend>Zaključak:</legend>
	  	<label for="result">Ishod:</label>
	  	<select name="result" id="result" onchange="if(parseInt(this.value)==3){this.nextSibling.nextSibling.style.display='block'}else{this.nextSibling.nextSibling.style.display='none'}">
	  		{{%loop start result_type_id}}
			<option value="{{$result_type_id}}">{{$result_type_name}}</option>
			{{%loop end}}
	  	</select>
		<input type="button" onclick="createMeetingTicket(this)" title="Kreirajte listić..." style="display:none;" id="btnMakeListic" value="kreiraj listić" />
		<br clear="all" />
		<label for="result_date">Datum:</label>
		<input type="text" name="result_date" id="result_date" maxlength="10" style="width:60px;" />
		<input type="button" class="datePicker" onclick="displayDatePicker('result_date',this)" title="Odaberi datum" />
		
		<label for="result_hour" style="width:25px;">Sat:</label>
		<input type="text" maxlength="2" name="result_hour" id="result_hour" style="width:16px;" maxval="23" minval="0" value="0" onchange="fixNumStepVal(this);" />
		<img src="gui/numstep.gif" border="0" usemap="#Map1" class="numstep" />
		<label for="result_minute" style="width:auto;">Min:</label>
		<input type="text" maxlength="2" name="result_minute" id="result_minute" style="width:16px;" maxval="59" minval="0" value="0" onchange="fixNumStepVal(this)" />
		<img src="gui/numstep.gif" border="0" usemap="#Map2" class="numstep" />
		<map name="Map1" id="Map1">
			<area shape="rect" coords="0,0,7,5" href="javascript:void(0)" onclick="incrementNumStep('result_hour')" />
			<area shape="rect" coords="0,5,7,10" href="javascript:void(0)" onclick="decrementNumStep('result_hour')" />
		</map>
		<map name="Map2" id="Map2">
			<area shape="rect" coords="0,0,7,5" href="javascript:void(0)" onclick="incrementNumStep('result_minute')" />
			<area shape="rect" coords="0,5,7,10" href="javascript:void(0)" onclick="decrementNumStep('result_minute')" />
		</map><br clear="all" />
		<label for="result_desc">Opis:</label>
		<textarea name="result_desc" id="result_desc"></textarea>
	</fieldset>
	
	<br clear="all" />
	<input type="submit" value="Sačuvaj" id="submit" class="save" />
</form>
<div id="details">
	<div id="history_details" class="area">
		<h3>Istorija poziva</h3>
		<div id="history_details_content"></div>
	</div>
	<div id="komitent_details" class="area">
		<h3>Detalji komitenta</h3>
	</div>
</div>
<h3>
<script>
	rokovnikVreme();
	alarmOnclick(document.getElementById("alarm_link"));
	{{$forEVAL}}
</script>
</h3>